<template>
    <div class="zbxz">
        <div class="left">
            <div class="toutiao">&emsp;&emsp;新建方案</div>

            <el-form :model="form">

                <!-- 方案名称 -->

                <el-form-item label="&emsp;&emsp;☆&emsp;&emsp;方案名称">
                    <el-col :span="8">

                        <el-input v-model="form.name" />
                    </el-col>
                </el-form-item>
                <!-- 直播通知 -->


                <el-form-item label="&emsp;&emsp;☆&emsp;&emsp;直播通知">
                    <el-select v-model="form.region" placeholder="please select your zone">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>

                <!-- 新建时间 -->

                <el-form-item label="&emsp;&emsp;☆&emsp;&emsp;新建时间">
                    <el-col :span="11">
                        <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date"
                            style="width: 100%" />
                    </el-col>
                    <el-col :span="2" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
                    </el-col>
                </el-form-item>

                <!-- 活动开关 -->

                <el-form-item label="&emsp;&emsp;☆&emsp;&emsp;活动开关">
                    <el-switch v-model="form.delivery" />
                </el-form-item>
                <!-- 策略营销 -->

                <el-form-item>
                    <span>&emsp;&emsp;☆&emsp;&emsp;策略营销:
                        <span class="ceyx_title" style="color:#9c9c9c">支持优惠券领取
                        </span>
                    </span>

                    <el-radio-group v-model="form.resource">
                        <el-radio label="无" />
                        <el-radio label="有" />
                    </el-radio-group>
                </el-form-item>

                <!-- 活动性质 -->



                <el-form-item label="&emsp;&emsp;☆&emsp;&emsp;活动性质">

                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="第一种性质" name="type" />
                        <el-checkbox label="第二种性质" name="type" />
                        <el-checkbox label="第三种性质" name="type" />
                        <el-checkbox label="第四种性质" name="type" />
                        <el-checkbox label="第五种性质" name="type" />
                        <el-checkbox label="第六种性质" name="type" />
                    </el-checkbox-group>
                </el-form-item>

                <!-- 活动视频 -->


                <el-form-item>
                    <div>&emsp;&emsp;☆&emsp;&emsp;活动视频:
                        <span class="ceyx_title" style="color:#9c9c9c">视频大小200MB
                        </span>


                    </div>
                    <br>
                    <el-upload class="avatar-uploader"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-upload class="avatar-uploader"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-upload class="avatar-uploader"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-upload class="avatar-uploader"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                    <el-upload class="avatar-uploader"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>

                <!-- 活动图片 -->

                <el-form-item label="&emsp;&emsp;☆&emsp;&emsp;选择活动图片">
                    <el-button type="danger" plain></el-button>
                    <span>200MB</span>
                </el-form-item>




                <!-- 按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button>应用</el-button>
                </el-form-item>
            </el-form>



        </div>
        <div class="right">
            <div class="toutiao">&emsp;&emsp;方案列表</div>



            <!-- 方案 -->
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" />
                <el-table-column>
                    <template #default="scope">{{ scope.row.title }}</template>
                </el-table-column>
                <el-table-column>
                    <template #default="scope">
                        <el-button>编辑</el-button>
                        <!-- <el-popconfirm title="你确定要删除了?" @confirm="confirm(scope.row.id)" @cancel="cancel"> -->
                        <!-- <template #reference> -->
                        <el-button>删除</el-button>
                        <!-- </template> -->
                        <!-- </el-popconfirm> -->

                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页 -->
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="small"
                :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="10"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        </div>
    </div>
</template>
<script lang="ts" setup>

import { ref, reactive, onMounted } from 'vue'


import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'


import axios from "axios";
import "../nrxg/ts/index"




import type { ElTable } from 'element-plus'

interface User {

    id: number;
    title: string;
    writer: string;
    classify: string;
    times: string;
    sell: number;
    set: string;
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
    if (rows) {
        rows.forEach((row) => {
            // TODO: improvement typing when refactor table
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            multipleTableRef.value!.toggleRowSelection(row, undefined)
        })
    } else {
        multipleTableRef.value!.clearSelection()
    }
}
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

const tableData = ref<User[]>([])


const abc = ref<number>(0);


// 当前第几页
let page = 1;

onMounted(() => {
    getData();
});

const getData = () => {
    axios
        .post("/api/pos/list", {
            pageSize: 10,
            currentPage: page,
            //   search: input.value,
        })
        .then((res) => {
            tableData.value = res.data.result;
            abc.value = res.data.count;
        });
};

const pageChange = (page1: number) => {
    page = page1;
    getData();
};

const search = () => {
    page = 1;
    getData();
};

const remove = (id: number) => {
    console.log(id);
};

const confirm = (id: number) => {
    console.log("确定删除", id);
    axios
        .post("/api/pos/del", {
            id: id,
        })
        .then((res) => {
            getData();
        });
};
const cancel = () => {
    console.log("取消");
};




onMounted(() => {

});









const small = ref(true)
const background = ref(false)
const disabled = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
// 活动视频

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}









// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const onSubmit = () => {
    console.log('submit!')
}
</script>
<style lang="less" scoped>
.zbxz {
    width: 100%;
    height: 100%;
    display: flex;


    .left {
        width: 60%;
        height: 100%;

        margin-right: 10px;

        .toutiao {
            width: 100%;
            height: 32px;
            background: #F5F5F5;
            line-height: 32px;
            margin-top: 6px;
        }

        .ceyx_title {
            font-size: 12px;
        }

        .avatar-uploader {


            .avatar {
                width: 80px;
                height: 80px;
                display: block;
            }

        }
    }

    .right {
        width: 40%;
        height: 100%;


        .toutiao {
            width: 100%;
            height: 32px;
            background: #F5F5F5;
            line-height: 32px;
            margin-top: 6px;
        }

        .demo-pagination-block+.demo-pagination-block {
            margin-top: 10px;
        }

        .demo-pagination-block .demonstration {
            margin-bottom: 16px;
        }

        .el-pagination--small {
            text-align: end;
        }
    }
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    text-align: center;
}
</style>
